<template>
  <!-- 容器 -->
  <div class="box" ref="dom"></div>
</template>

<script>
// 引入echarts
import echarts from "echarts";
export default {
  mounted() {
    //   初始化 echarts 实例
    let myCharts = echarts.init(this.$refs.dom);
    myCharts.setOption({
      xAxis: {
        //   隐藏x轴
        show: false,
        type: "category",
      },
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      //   系列
      series: [
        {
          type: "line",
          data: [12, 35, 56, 32, 67, 45, 23, 5, 66],
          //   折线拐点的样式透明度设置
          itemStyle: {
            opacity: 0,
          },
          //   线条的颜色
          lineStyle: {
            color: "purple",
          },
          // 填充线条区域颜色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
          //   线条平滑的设置
          smooth: true,
        },
      ],
      //   布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
</style>